<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link href="../css/common.css" rel="stylesheet">
<link href="../css/index.css" rel="stylesheet">
<link rel="stylesheet" href="../css/content.css" />	
<script src="../js/jquery-1.8.3.min.js"></script>
<script src="../js/tongji/highcharts.js"></script>
<script src="../js/tongji/data.js"></script>
<script src="../js/tongji/exporting.js"></script>
<script src="../js/tongji.js"></script>
<script src="../laydate/laydate.js"></script>

<title></title>
</head>

<body>

<div class="fanhui">
    <p><a href="#">车辆监控&nbsp;</a></p><p>&gt;&nbsp;</p><p><a href="#">车辆监控&nbsp;</a></p><p>&gt;&nbsp;</p><p><a href="#">运行统计&nbsp;</a></p>
</div>
<div class="demo3">
    <ul class="chaxunda">
    <li><p>开始时间：</p><input type="text" class="inline"  onClick="laydate({istime: true, format: 'YYYY-MM-DD hh:mm:ss'})" id="start"></li>
    <li><p>结束时间：</p><input type="text" class="inline"  onClick="laydate({istime: true, format: 'YYYY-MM-DD hh:mm:ss'})" id="end"></li>
    <li><p>车辆选择：</p><select><option>车辆选择</option><option>车辆选择</option></select>
    </li>
    <li><input type="button" value="查询" style=" background:#22abd4; color:#ffffff; text-align:center; padding:0;" class="showdiv"></li>  
    </ul>
</div>
<script>
!function(){
laydate.skin('molv');//切换皮肤，请查看skins下面皮肤库
laydate({elem: '#demo'});//绑定元素
}();
//日期范围限制
var start = {
    elem: '#start',
    format: 'YYYY-MM-DD',
    min: laydate.now(), //设定最小日期为当前日期
    max: '2099-06-16', //最大日期
    istime: true,
    istoday: false,
    choose: function(datas){
         end.min = datas; //开始日选好后，重置结束日的最小日期
         end.start = datas //将结束日的初始值设定为开始日
    }
};
var end = {
    elem: '#end',
    format: 'YYYY-MM-DD',
    min: laydate.now(),
    max: '2099-06-16',
    istime: true,
    istoday: false,
    choose: function(datas){
        start.max = datas; //结束日选好后，充值开始日的最大日期
    }
};
laydate(start);
laydate(end);
//自定义日期格式
laydate({
    elem: '#test1',
    format: 'YYYY年MM月DD日',
    festival: true, //显示节日
    choose: function(datas){ //选择日期完毕的回调
        alert('得到：'+datas);
    }
});
//日期范围限定在昨天到明天
laydate({
    elem: '#hello3',
    min: laydate.now(-1), //-1代表昨天，-2代表前天，以此类推
    max: laydate.now(+1) //+1代表明天，+2代表后天，以此类推
});
</script>
<div style="clear:both"></div>
<div class="tongji">
	<div class="module fl">
    	<div id="licheng" style="min-width: 310px; height: 360px; margin: 0 auto"></div>
        <table id="datatable">
            <thead>
                <tr>
                    <th></th>
                    <th>总里程</th>
                    <th>新增里程</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th>2016/10/23</th>
                    <td>3</td>
                    <td>4</td>
                </tr>
                <tr>
                    <th>2016/10/24</th>
                    <td>2</td>
                    <td>0</td>
                </tr>
                <tr>
                    <th>2016/10/25</th>
                    <td>5</td>
                    <td>11</td>
                </tr>
                <tr>
                    <th>2016/10/26</th>
                    <td>1</td>
                    <td>1</td>
                </tr>
                <tr>
                    <th>2016/10/27</th>
                    <td>2</td>
                    <td>4</td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="module fr">
    	<div id="nenghao" style="min-width: 310px; height: 360px; margin: 0 auto"></div>
        <table id="datatable">
            <thead>
                <tr>
                    <th></th>
                    <th>总能耗</th>
                    <th>新增能耗</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th>2016/10/23</th>
                    <td>3</td>
                    <td>4</td>
                </tr>
                <tr>
                    <th>2016/10/24</th>
                    <td>2</td>
                    <td>0</td>
                </tr>
                <tr>
                    <th>2016/10/25</th>
                    <td>5</td>
                    <td>11</td>
                </tr>
                <tr>
                    <th>2016/10/26</th>
                    <td>1</td>
                    <td>1</td>
                </tr>
                <tr>
                    <th>2016/10/27</th>
                    <td>2</td>
                    <td>4</td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="module fl">
    	<script src='http://www.ichartjs.com/ichart.latest.min.js'></script>
        <div id='chongdian' style="width:100%"></div>
    </div>
    <div class="module fr">
    	
        <div id='shichang' style="width:100%"></div>
    </div>
</div>





</body>
</html>
